<template>
  <h1>使用接口数据，mockjs 代理数据。</h1>

  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <van-row class="brr" justify="space-around">
        <van-col span="4">id</van-col>
        <van-col span="4">姓名</van-col>
        <van-col span="4">作者</van-col>
      </van-row>
      <van-row
        class="br"
        justify="space-around"
        v-for="item in bookData.list"
        :key="item.name"
      >
        <van-col span="4">{{ item.id }}</van-col>
        <van-col span="4">{{ item.name }}</van-col>
        <van-col span="4">{{ item.author }}</van-col>
      </van-row>

      <van-cell />
    </van-list>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { request, request_url } from "../../js/request";

const loading = ref(false);
const finished = ref(false);

const getData = function () {
  //获取列表数据
  request({
    url: "/mock/getBooks",
    method: "get",
  })
    .then((res) => {
      bookData.list = res.data.data;
      console.log(res.data.data);
    })
    .catch((error) => {
      console.log(error);
    });
};

const bookData = reactive({
  list: [],
});
</script>

<style>
</style>